<template>
	<xn-form-container :title="formTitle" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="调解中心" name="configId">
						<a-select v-model:value="formData.configId" placeholder="请选择调解中心">
							<a-select-option
								v-for="option in tjCenterList"
								:key="option.id"
								:value="option.id"
								:label="option.companyName"
							>
								{{ option.companyName }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="姓名" name="name">
						<a-input v-model:value="formData.name" placeholder="请输入姓名" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="性别" name="gender">
						<a-select v-model:value="formData.gender" placeholder="请选择性别" :options="genderOptions" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="民族" name="ethnic">
						<a-select show-search v-model:value="formData.ethnic" placeholder="请选择民族" :options="nationOptions" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="办公地址" name="officeAddr">
						<a-input v-model:value="formData.officeAddr" placeholder="请输入办公地址" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="调委会职务" name="committeePos">
						<a-input v-model:value="formData.committeePos" placeholder="请输入调委会职务" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="调解员编号" name="mediatorNo">
						<a-input v-model:value="formData.mediatorNo" placeholder="请输入调解员编号" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="负责调解领域" name="mediationField">
						<a-input v-model:value="formData.mediationField" placeholder="请输入负责调解领域" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="调解科室" name="mediationDept">
						<a-input v-model:value="formData.mediationDept" placeholder="请输入调解科室" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="联系方式" name="contact">
						<a-input v-model:value="formData.contact" placeholder="请输入联系方式" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	import { required } from '@/utils/formRules'
	import mediatorApi from '@/api/website/mediator/mediatorApi'
	import tool from '@/utils/tool'
	import configApi from '@/api/website/config/configApi'

	// 组件状态
	const visible = ref(false)
	const submitLoading = ref(false)
	const formRef = ref()
	const emit = defineEmits(['successful'])

	const genderOptions = tool.dictList('Sex')
	const nationOptions = tool.dictList('NATION')
	const tjCenterList = ref([])
	// 表单数据结构
	const formData = ref({
		id: undefined,
		configId: undefined,
		name: undefined,
		gender: undefined,
		ethnic: undefined,
		officeAddr: undefined,
		committeePos: undefined,
		mediatorNo: undefined,
		mediationField: undefined,
		mediationDept: undefined,
		contact: undefined
	})

	// 验证规则
	const formRules = reactive({
		configId: [required('调解中心')],
		name: [required('姓名')],
		gender: [required('性别')],
		ethnic: [required('民族')],
		officeAddr: [required('办公地址')],
		committeePos: [required('调委会职务')],
		mediatorNo: [required('调解员编号')],
		mediationField: [required('负责调解领域')],
		mediationDept: [required('调解科室')],
		contact: [required('联系方式')]
	})

	// 动态标题
	const formTitle = computed(() => {
		return formData.value.id ? '修改调解员信息' : '新增调解员信息'
	})

	const onOpen = (record) => {
		configApi.listAll().then((res) => {
			tjCenterList.value = res
		})
		// 如果有记录，则填充表单数据（编辑模式）
		if (record) {
			formData.value = {
				...record
			}
		} else {
			// 重置表单（新增模式）
			formRef.value?.resetFields()
		}
		visible.value = true
	}

	// 表单重置
	const onClose = () => {
		formRef.value?.resetFields()
		visible.value = false
	}

	// 表单提交
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				try {
					submitLoading.value = true
					const submitData = {
						...formData.value
					}
					if (submitData.id) {
						// 如果ID不为空，调用修改接口
						mediatorApi
							.edit(submitData)
							.then((res) => {
								emit('successful', res)
								onClose()
								submitLoading.value = false
							})
							.catch(() => {
								submitLoading.value = false
							})
					} else {
						// 如果ID为空，调用新增接口
						mediatorApi
							.add(submitData)
							.then((res) => {
								emit('successful', res)
								onClose()
								submitLoading.value = false
							})
							.catch(() => {
								submitLoading.value = false
							})
					}
				} catch (e) {
					submitLoading.value = false
				}
			})
			.catch(() => {
				submitLoading.value = false
			})
	}
	defineExpose({
		onOpen
	})
</script>
